<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*属性选择器*/
        [v-cloak] {
            display: none;
        }

        .title {
            border: 2px solid gold;
        }

        .p1 {
            text-decoration: underline;
        }

        .p11 {
            background-color: pink;
        }
    </style>
</head>
<body>
<div id="app">
    <h2>在做项目很多时候，有表单注册，用户留言，评论功能，需要收集用户的信息</h2>
    <h3>登录表单</h3>
    <form action="">
        <div>
            用户名：<input type="text" v-model="username">
        </div>
        <div>
            密码：<input type="password" v-model="password">
        </div>
        <div>
            <button>登录</button>
        </div>
    </form>
    <h3>用户输入的了：</h3>
    <p>{{ username }}: {{password}}</p>
</div>
</body>
<script src="lib/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            username: '默认用户名',
            password: '默认密码',
            status: 1,
        }
    })
</script>

</html>
